<template>
    <div class="bg-container">
        <div class="form-box" :style="isSigned ? 'background:#fff' : ''">
            <template v-if="!isSigned">
                <div class="title">活动签到</div>
                <van-form @submit="onSubmit">
                    <van-cell-group>
                        <van-field
                            v-model="financialManager"
                            label="理财经理"
                            placeholder="理财经理"
                            :rules="[{ required: true, message: '请选择理财经理' }]"
                            readonly
                            @click="showManagerList = !showManagerList"
                        />
                        <van-field v-model="name" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请输入姓名' }]" />
                        <van-field name="phone" :rules="[{ validator: phoneValidator, message: '请输入正确手机号' }]" v-model="phone" label="手机号" placeholder="手机号" />
                    </van-cell-group>
                    <div class="btn">
                        <van-button :loading="isLoading" type="primary" native-type="submit"> 提交 </van-button>
                    </div>
                </van-form>
            </template>
            <template v-else>
                <div class="sign-success">
                    <div>
                        <van-icon name="checked" size="48px" color="#dab374" />
                        <div>恭喜您，签到成功~</div>
                        <van-button type="primary" native-type="submit" class="btn confrim" @click="$router.replace('/home')"> 确定 </van-button>
                    </div>
                </div>
            </template>
        </div>
        <van-popup v-model="showManagerList" position="bottom">
            <van-picker title="理财经理" show-toolbar :columns="managerList" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
    import { phoneValidator } from "@/utils/validator";
    import { add } from "@/api/signIn";
    import { Toast } from "vant";

    export default {
        data() {
            return {
                phoneValidator,
                name: "",
                financialManager: "",
                phone: "",
                info: {},
                isLoading: false,
                isSigned: false,
                showManagerList: false,
                managerList: ["韩星琪", "万强", "罗莉", "伍秋虎", "池永兰", "颜文略", "张庆", "王丹", "彭璟艳", "王路"],
            };
        },
        async created() {},
        async mounted() {},
        methods: {
            onConfirm(value, index) {
                this.financialManager = value;
                this.showManagerList = !this.showManagerList;
            },
            async onSubmit() {
                this.isLoading = true;
                let params = {
                    financialManager: this.financialManager,
                    phone: this.phone,
                    name: this.name,
                };
                let res = await add(params);
                if (res.code === 1) {
                    this.isSigned = true;
                }
                this.isLoading = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    /deep/ .van-field__label .van-field__value {
        color: #646566;
    }
    .bg-container {
        height: 100vh;
        width: 100%;
        background: url("../../assets/images/signIn/bg.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .form-box {
            background: #fff;
            box-shadow: 1px 0px 15px #696969;
            width: 80%;
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            padding: 20px;
            border-radius: 20px;
            text-align: center;
            .title {
                color: #666;
                font-size: 24px;
                margin: 30px 0;
            }
            .btn {
                width: 90%;
                margin: 30px auto 20px;
                text-align: center;
                button {
                    width: 100%;
                    border-radius: 16px;
                    font-size: 16px;
                }
            }
            .confrim {
                border-radius: 10px;
                margin-top: 40px;
            }
            .sign-success {
                color: #dab374;
                font-size: 24px;
                min-height: 250px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>